<template>
  <div class="goods-list-container">
    <header class="list-header van-hairline--top-bottom">
      <nav :class="{ active: type == 'all' }" @click="toggle('all')">综合</nav>
      <nav :class="{ active: type == 'sale' }" @click="toggle('sale')">
        销量
      </nav>
      <nav
        class="price"
        :class="{
          'price-up': type == 'price-up',
          'price-down': type == 'price-down',
        }"
        @click="toggle('price')"
      >
        价格
      </nav>
    </header>
    <section class="list-content">
      <van-pull-refresh
        v-model="refreshing"
        @refresh="onRefresh"
        head-height="100"
      >
        <van-list
          v-model="loading"
          :finished="finished"
          finished-text="没有了"
          @load="onLoad"
          :immediate-check="false"
        >
          <GoodCard
            v-for="good in goodsList"
            :key="good.id"
            :good="good"
          ></GoodCard>
        </van-list>
      </van-pull-refresh>
    </section>
  </div>
</template>

<script>
import { mapState } from 'vuex';
import GoodCard from './GoodCard.vue';

export default {
  components: {
    GoodCard,
  },
  data() {
    return {
      type: 'all',
      refreshing: false,
      loading: false,
      finished: false,
      page: 1,
    };
  },
  computed: {
    ...mapState(['goodsList']),
  },
  methods: {
    async onRefresh() {
      this.loading = true;
      this.finished = false;
      this.page = 1;
      this.$store.commit('setGoodsList', []);
      await this.$store.dispatch('fetchGoodsList', {
        page: 1,
        sort: this.type,
        type: this.$store.state.goodsType,
      });
      this.loading = false;
      this.refreshing = false;
    },
    async onLoad() {
      // console.log('加载更多');
      this.page += 1;
      this.loading = true;
      const res = await this.$store.dispatch('fetchGoodsList', {
        page: this.page,
        sort: this.type,
        type: this.$store.state.goodsType,
        append: true,
      });
      this.loading = false;
      if (!res) this.finished = true;
    },
    toggle(type) {
      if (type === 'price') {
        this.type = this.type !== 'price-up' ? 'price-up' : 'price-down';
      } else {
        this.type = type;
      }
      this.onRefresh();
    },
  },
};
</script>

<style lang="less" scoped>
.goods-list-container {
  width: 295px;
  position: fixed;
  top: 135px;
  left: 80px;
  bottom: 50px;
  overflow: auto;
  .list-header {
    display: flex;
    justify-content: end;
    nav {
      width: 50px;
      height: 25px;
      line-height: 25px;
      text-align: center;
      color: #cecece;
      position: relative;
      margin-right: 10px;
    }
    .active,
    .price-up,
    .price-down {
      color: #ff1a90;
      font-weight: bold;
    }
    .price::before,
    .price::after {
      content: '';
      border: 4px solid transparent;
      position: absolute;
      right: 0;
    }
    .price::before {
      border-bottom-color: #cecece;
      top: 3px;
    }
    .price::after {
      border-top-color: #cecece;
      bottom: 3px;
    }
    .price-up::before {
      border-bottom-color: #ff1a90;
    }
    .price-down::after {
      border-top-color: #ff1a90;
    }
  }
}
</style>
